import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';

export default function Section({ children }) {
  // context作用大概是为每一个组件(及子组件)提供一个共享的上下文
  const level = useContext(LevelContext);
  // 发: <context.Provider value={data}> 包裹数据
  // 收: useContext(context) 需要指定具体的context
  // Q: 如何共享多个上下文? 
  // A: 多个上下文可以共享，只要它们的名字不同即可。一个上下文也能添加多个数据
  return (
    <section className="section">
      {/* Provider是React的Context API的一种实现，它可以使组件树中的所有组件都能共享一个上下文对象。 */}
      {/* 这里的Provider组件接收一个value属性，并将其作为自己的上下文，并将其子组件作为自己的子组件 */}
      <LevelContext.Provider value={level + 1}>
        {children}
      </LevelContext.Provider>
    </section>
  );
}
